<!--
 * @Descripttion: (物料信息/base_material)
 * @Author: (admin)
 * @Date: (2025-04-29)
-->
<template>
	<div>
		<el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent>
			<el-form-item label="物料编号" prop="materialCode">
				<el-input v-model="queryParams.materialCode" placeholder="请输入物料编号" />
			</el-form-item>
			<el-form-item label="中文名称" prop="materialChLan">
				<el-input v-model="queryParams.materialChLan" placeholder="请输入物料中文名称" />
			</el-form-item>
			<el-form-item label="英文名称" prop="materialEngLan">
				<el-input v-model="queryParams.materialEngLan" placeholder="请输入物料英文名称" />
			</el-form-item>
			<el-form-item label="物料类型" prop="materialType">
				<el-select clearable v-model="queryParams.materialType" placeholder="请选择物料类型">
					<el-option v-for="item in options.material_type" :key="item.dictValue" :label="item.dictLabel"
						:value="item.dictValue">
						<span class="fl">{{ item.dictLabel }}</span>
						<span class="fr" style="color: var(--el-text-color-secondary);">{{ item.dictValue }}</span>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="search" type="primary" @click="handleQuery">{{ $t('btn.search') }}</el-button>
				<el-button icon="refresh" @click="resetQuery">{{ $t('btn.reset') }}</el-button>
			</el-form-item>
		</el-form>
		<!-- 工具区域 -->
		<el-row :gutter="15" class="mb10">
			<el-col :span="1.5">
				<el-button type="primary" v-hasPermi="['base:material:add']" plain icon="plus" @click="handleAdd">
					{{ $t('btn.add') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" :disabled="single" v-hasPermi="['base:material:edit']" plain icon="edit"
					@click="handleUpdate">
					{{ $t('btn.edit') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" :disabled="multiple" v-hasPermi="['base:material:delete']" plain icon="delete"
					@click="handleDelete">
					{{ $t('btn.delete') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-dropdown trigger="click" v-hasPermi="['base:material:import']">
					<el-button type="primary" plain icon="Upload">
						{{ $t('btn.import') }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
					</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="upload">
								<importData templateUrl="BaseManage/BaseMaterial/importTemplate"
									importUrl="/BaseManage/BaseMaterial/importData" @success="handleFileSuccess"></importData>
							</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['base:material:export']">
					{{ $t('btn.export') }}
				</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
		</el-row>

		<el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
			highlight-current-row @sort-change="sortChange" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="50" align="center" />
			<el-table-column prop="materialId" label="物料id" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('materialId')" />
			<el-table-column prop="materialCode" label="物料编号" width="180" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('materialCode')" />
			<el-table-column prop="materialChLan" label="中文名称" width="450" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('materialChLan')" />
			<el-table-column prop="materialEngLan" label="英文名称" width="200" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('materialEngLan')" />
			<el-table-column prop="materialType" label="物料类型" width="120" align="center"
				v-if="columns.showColumn('materialType')">
				<template #default="scope">
					<dict-tag :options="options.material_type" :value="scope.row.materialType" />
				</template>
			</el-table-column>
			<el-table-column prop="materialUnitBase" label="基本单位" width="100" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('materialUnitBase')" />
			<el-table-column prop="materialWeightDesign" label="设计重量" width="100" align="center"
				v-if="columns.showColumn('materialWeightDesign')" />
			<el-table-column prop="materialWeight" label="重量(kg)" width="100" align="center"
				v-if="columns.showColumn('materialWeight')" />
			<el-table-column prop="materialLength" label="长(mm)" width="100" align="center"
				v-if="columns.showColumn('materialLength')" />
			<el-table-column prop="materialWidth" label="宽(mm)" width="100" align="center"
				v-if="columns.showColumn('materialWidth')" />
			<el-table-column prop="materialHeight" label="高(mm)" width="100" align="center"
				v-if="columns.showColumn('materialHeight')" />
			<el-table-column prop="verifyState" label="是否验证" width="100" align="center"
				v-if="columns.showColumn('verifyState')">
				<template #default="scope">
					<dict-tag :options="options.verifyStateOptions" :value="scope.row.verifyState" />
				</template>
			</el-table-column>
			<el-table-column prop="verifyStart" label="验证起始位" width="100" align="center"
				v-if="columns.showColumn('verifyStart')" />
			<el-table-column prop="verifyCode" label="验证号" width="100" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('verifyCode')" />
			<el-table-column prop="filePath" label="操作制导路径" width="130" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('filePath')" />
			<el-table-column prop="remark" label="备注" width="120" align="center" :show-overflow-tooltip="true"
				v-if="columns.showColumn('remark')" />
			<el-table-column label="操作" width="160" fixed="right">
				<template #default="scope">
					<el-button-group>
						<el-button text v-hasPermi="['base:material:edit']" type="success" icon="edit"
							@click="handleUpdate(scope.row)">
							{{ $t('btn.edit') }}
						</el-button>
						<el-button text v-hasPermi="['base:material:delete']" type="danger" icon="delete"
							@click="handleDelete(scope.row)">
							{{ $t('btn.delete') }}
						</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
			@pagination="getList" />


		<el-dialog draggable :close-on-click-modal="false" :title="title" :lock-scroll="false" v-model="open">
			<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
				<el-row :gutter="20">
					<!-- <el-col :lg="12">
						<el-form-item label="物料id" prop="materialId">
							<el-input v-model="form.materialId" placeholder="请输入物料id" :disabled="opertype != 1" />
						</el-form-item>
					</el-col> -->
					<el-col :lg="12">
						<el-form-item label="物料编号" prop="materialCode">
							<el-input v-model="form.materialCode" placeholder="请输入物料编号" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="物料类型" prop="materialType">
							<el-select v-model="form.materialType" placeholder="请选择物料类型" style="width: 100%;">
								<el-option v-for="item in options.material_type" :key="item.dictValue" :label="item.dictLabel"
									:value="item.dictValue"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :lg="24">
						<el-form-item label="中文名称" prop="materialChLan">
							<el-input v-model="form.materialChLan" placeholder="请输入中文名称" />
						</el-form-item>
					</el-col>
					<el-col :lg="24">
						<el-form-item label="英文名称" prop="materialEngLan">
							<el-input v-model="form.materialEngLan" placeholder="请输入英文名称" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="基本单位" prop="materialUnitBase">
							<el-input v-model="form.materialUnitBase" placeholder="请输入基本单位" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="设计重量" prop="materialWeightDesign">
							<el-input v-model="form.materialWeightDesign" placeholder="请输入设计重量" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="重量(kg)" prop="materialWeight">
							<el-input v-model="form.materialWeight" placeholder="请输入重量(kg)" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="长(mm)" prop="materialLength">
							<el-input v-model="form.materialLength" placeholder="请输入长(mm)" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="宽(mm)" prop="materialWidth">
							<el-input v-model="form.materialWidth" placeholder="请输入宽(mm)" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="高(mm)" prop="materialHeight">
							<el-input v-model="form.materialHeight" placeholder="请输入高(mm)" />
						</el-form-item>
					</el-col>
					<el-col :lg="24">
						<el-form-item label="是否验证" prop="verifyState">
							<el-radio-group v-model="form.verifyState">
								<el-radio v-for="item in options.verifyStateOptions" :key="item.dictValue"
									:value="parseInt(item.dictValue)">
									{{ item.dictLabel }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="验证起始位" prop="verifyStart">
							<el-input v-model.number="form.verifyStart" placeholder="请输入验证起始位" />
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						<el-form-item label="验证号" prop="verifyCode">
							<el-input v-model="form.verifyCode" placeholder="请输入验证号" />
						</el-form-item>
					</el-col>
					<el-col :lg="24">
						<el-form-item label="操作制导路径" prop="filePath" label-width="120px">
							<el-input v-model="form.filePath" placeholder="操作制导路径" />
						</el-form-item>
					</el-col>
					<el-col :lg="24">
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer v-if="opertype != 3">
				<el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
				<el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="basematerial">
import {
	pageBaseMaterial,
	addBaseMaterial, delBaseMaterial,
	updateBaseMaterial, getBaseMaterial,
}
	from '@/api/baseManage/baseMaterial.js'
import importData from '@/components/ImportData'
const { proxy } = getCurrentInstance()
const ids = ref([])
const loading = ref(false)
const showSearch = ref(true)
const queryParams = reactive({
	pageNum: 1,
	pageSize: 10,
	sort: '',
	sortType: 'asc',
	materialCode: undefined,
	materialChLan: undefined,
	materialEngLan: undefined,
	materialType: undefined,
})
const columns = ref([
	{ visible: false, prop: 'materialId', label: '物料id' },
	{ visible: true, prop: 'materialCode', label: '物料编号' },
	{ visible: true, prop: 'materialChLan', label: '中文名称' },
	{ visible: true, prop: 'materialEngLan', label: '英文名称' },
	{ visible: true, prop: 'materialType', label: '物料类型' },
	{ visible: true, prop: 'materialUnitBase', label: '基本单位', },
	{ visible: true, prop: 'materialWeightDesign', label: '设计重量' },
	{ visible: true, prop: 'materialWeight', label: '重量(kg)' },
	{ visible: true, prop: 'materialLength', label: '长(mm)' },
	{ visible: true, prop: 'materialWidth', label: '宽(mm)' },
	{ visible: true, prop: 'materialHeight', label: '高(mm)' },
	{ visible: true, prop: 'verifyStart', label: '验证起始位' },
	{ visible: true, prop: 'verifyState', label: '是否验证' },
	{ visible: true, prop: 'verifyCode', label: '验证号' },
	{ visible: true, prop: 'filePath', label: '操作制导路径' },
	{ visible: true, prop: 'remark', label: '备注' },
])
const total = ref(0)
const dataList = ref([])
const queryRef = ref()
const defaultTime = ref([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)])


var dictParams = [
	"material_type",
]

proxy.getDicts(dictParams).then((response) => {
	response.data.forEach((element) => {
		state.options[element.dictType] = element.list
	})
})

function getList() {
	loading.value = true
	pageBaseMaterial(queryParams).then(res => {
		const { code, data } = res
		if (code == 200) {
			dataList.value = data.result
			total.value = data.totalNum
			loading.value = false
		}
	})
}

// 查询
function handleQuery() {
	queryParams.pageNum = 1
	getList()
}

// 重置查询操作
function resetQuery() {
	proxy.resetForm("queryRef")
	handleQuery()
}
// 多选框选中数据
function handleSelectionChange(selection) {
	ids.value = selection.map((item) => item.materialId);
	single.value = selection.length != 1
	multiple.value = !selection.length;
}
// 自定义排序
function sortChange(column) {
	var sort = undefined
	var sortType = undefined

	if (column.prop != null && column.order != null) {
		sort = column.prop
		sortType = column.order

	}
	queryParams.sort = sort
	queryParams.sortType = sortType
	handleQuery()
}

/*************** form操作 ***************/
const formRef = ref()
const title = ref('')
// 操作类型 1、add 2、edit 3、view
const opertype = ref(0)
const open = ref(false)
const state = reactive({
	single: true,
	multiple: true,
	form: {},
	rules: {
		materialId: [{ required: true, message: "物料id不能为空", trigger: "blur" }],
		materialCode: [{ required: true, message: "物料编号不能为空", trigger: "blur" }],
		materialType: [{ required: true, message: "物料类型不能为空", trigger: "change" }],
		verifyStart: [{ required: true, message: "验证起始位不能为空", trigger: "blur", type: "number" }],
		verifyState: [{ required: true, message: "是否验证不能为空", trigger: "blur", type: "number" }],
	},
	options: {
		// 物料类型 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
		material_type: [],
		// 是否验证（0不验证 1验证） 选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
		verifyStateOptions: [
			{ dictLabel: '不验证', dictValue: '0', listClass: 'danger' },
			{ dictLabel: '验证', dictValue: '1', listClass: 'success' }
		],
	}
})

const { form, rules, options, single, multiple } = toRefs(state)

// 关闭dialog
function cancel() {
	open.value = false
	reset()
}

// 重置表单
function reset() {
	form.value = {
		materialId: null,
		materialCode: null,
		materialChLan: null,
		materialEngLan: null,
		materialType: null,
		materialLength: null,
		materialWidth: null,
		materialHeight: null,
		materialWeightDesign: null,
		materialWeight: null,
		materialUnitBase: null,
		verifyStart: 0,
		verifyState: 0,
		verifyCode: null,
		filePath: null,
		createBy: null,
		createTime: null,
		updateBy: null,
		updateTime: null,
		remark: null,
	};
	proxy.resetForm("formRef")
}


// 添加按钮操作
function handleAdd() {
	reset();
	open.value = true
	title.value = '添加物料信息'
	opertype.value = 1
	form.value.materialId = proxy.parseGuid();
}
// 修改按钮操作
function handleUpdate(row) {
	reset()
	const id = row.materialId || ids.value
	getBaseMaterial(id).then((res) => {
		const { code, data } = res
		if (code == 200) {
			open.value = true
			title.value = '修改物料信息'
			opertype.value = 2

			form.value = {
				...data,
			}
		}
	})
}

// 添加&修改 表单提交
function submitForm() {
	proxy.$refs["formRef"].validate((valid) => {
		if (valid) {

			if (form.value.materialId != undefined && opertype.value === 2) {
				updateBaseMaterial(form.value).then((res) => {
					proxy.$modal.msgSuccess("修改成功")
					open.value = false
					getList()
				})
			} else {
				addBaseMaterial(form.value).then((res) => {
					proxy.$modal.msgSuccess("新增成功")
					open.value = false
					getList()
				})
			}
		}
	})
}

// 删除按钮操作
function handleDelete(row) {
	const Ids = row.materialId ? [row.materialId] : undefined || ids.value
	proxy
		.$confirm('是否确认删除"' + Ids.length + '"条数据项？', "警告", {
			confirmButtonText: proxy.$t('common.ok'),
			cancelButtonText: proxy.$t('common.cancel'),
			type: "warning",
		})
		.then(function () {
			return delBaseMaterial(Ids)
		})
		.then(() => {
			getList()
			proxy.$modal.msgSuccess("删除成功")
		})
}


// 导入数据成功处理
const handleFileSuccess = (response) => {
	const { item1, item2 } = response.data
	var error = ''
	item2.forEach((item) => {
		error += item.storageMessage + ','
	})
	proxy.$alert(item1 + '<p>' + error + '</p>', '导入结果', {
		dangerouslyUseHTMLString: true
	})
	getList()
}

// 导出按钮操作
function handleExport() {
	proxy
		.$confirm("是否确认导出物料信息数据项?", "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		})
		.then(async () => {
			await proxy.downFile('/BaseManage/BaseMaterial/export', { ...queryParams })
		})
}

handleQuery()
</script>